<template>
  <div class="page-content">
    <div class="content-bar">
      <div class="bar-title">
        <img
          class="title-icon"
          src="@/assets/images/icon/weibo.png"
        />
        <span class="title-name">今日热搜排行榜</span>
      </div>
      <div class="bar-list">
        <ul class="bar-ul">
          <li
            class="bar-li"
            v-for="(item,index) in list"
            :key="index"
          >
            <a
              title="点击查看详情"
              class="li-content"
              :href="item.url"
              target="_blank"
            >
              <div
                class="c-badge"
                :class="{'top': item.id === 0}"
              >{{item.id === 0 ? '顶' : item.id}}</div>
              <div class="c-info">
                <div class="info-title">{{item.name}}</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import weibodata from '@/api/data/weibo'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      this.list = weibodata.data
    }
  }
}
</script>

<style lang="less" scoped>
.page-content {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  overflow: hidden;
  width: 1200px;
  margin: 20px auto;
  .content-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
    user-select: none;
    width: 100%;
    flex: 0 0 auto;
  }
  .bar-title {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 2px;
    min-height: 42px;
    z-index: 250;
    margin-right: 5px;
    .title-icon {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .title-name {
      color: rgb(4, 74, 171);
      margin-left: 10px;
    }
    .title-search {
      width: 200px;
    }
  }
  .bar-list {
    flex: 1 1 auto;
    position: relative;
    overflow-y: scroll;
    padding-right: 3px;
    .bar-ul {
      transform: translate(0px, 0px) translateZ(0px);
      position: relative;
      padding-bottom: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      .bar-li {
        cursor: pointer;
        a.li-content {
          display: flex;
          padding: 5px;
          margin-bottom: 10px;
          background-color: #fff;
          border-radius: 2px;
          .c-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            transition: all 0.2s ease;
            color: #e8f1ff;
            background-color: #007fff;
            overflow: hidden;
            width: 38px;
            height: 46px;
            &.top {
              background-color: #e7162d;
            }
          }
          .c-info {
            flex-grow: 1;
            position: relative;
            margin-left: 20px;
            padding: 10px 0;
            min-width: 0;
            cursor: pointer;
            .info-title {
              max-width: 100%;
              font-size: 15px;
              color: #3d3d3d;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        &:hover {
          a.li-content {
            .c-badge {
              background-color: #71b5f8;
              &.top {
                background-color: #e96272;
              }
            }
            .c-info {
              .info-title {
                color: #007fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
